<template>
  <div class="h-full overflow-hidden">
    <n-card :bordered="false" class="h-full rounded-8px shadow-sm">
      <n-space class="pb-12px" justify="space-between">
        <n-space>
          <n-button type="primary" @click="getDataSource()">全部订单</n-button>
          <n-badge :value="2">
            <n-button @click="getDataSource('待接单')">待接单</n-button>
          </n-badge>
          <n-badge :value="2">
            <n-button @click="getDataSource('未反馈')">未反馈</n-button>
          </n-badge>
          <n-badge :value="7">
            <n-popselect v-model:value="slectValue" :options="options" size="medium">
              <n-button>
                {{ slectValue || 'Popselect' }}
              </n-button>
            </n-popselect>
          </n-badge>
          <n-badge :value="2">
            <n-button @click="getDataSource('交稿审核')">交稿审核</n-button>
          </n-badge>
          <n-badge :value="2">
            <n-button @click="getDataSource('审核通过')">审核通过</n-button>
          </n-badge>
          <n-badge :value="2">
            <n-button @click="getDataSource('订单完结')">订单完结</n-button>
          </n-badge>
        </n-space>

        <n-space align="center" :size="18">
          <n-badge :value="2">
            <n-button @click="getDataSource('不良订单')">不良订单</n-button>
          </n-badge>
          <n-badge :value="2">
            <n-button @click="getDataSource('流标')">流标</n-button>
          </n-badge>

          <n-badge :value="2">
            <n-button @click="getDataSource('审核不通过')">审核不通过</n-button>
          </n-badge>
          <n-badge :value="2">
            <n-button @click="getDataSource('订单超时')">订单超时</n-button>
          </n-badge>
        </n-space>
      </n-space>

      <!-- <n-space class="py-12px" justify="space-around">
        <n-input-group>
          <n-input ref="inputRef" v-model="inputValue" clearable placeholder="订单号、手机号" @input="getDataSource">
            <template #prefix>
              <icon-uil-search class="text-15px text-#c2c2c2" />
            </template>
          </n-input>
          <n-button type="primary" ghost>搜索</n-button>
        </n-input-group>

        <n-input-group>
          <n-input-group-label>产品</n-input-group-label>
          <n-select v-model:value="productValue" :options="productOption" :style="{ width: '120px' }" />
          <n-button type="primary" ghost>搜索</n-button>
        </n-input-group>

        <n-date-picker v-model:value="range" type="datetimerange" clearable />

        <n-input-group>
          <n-input-group-label>不良类型</n-input-group-label>
          <n-select v-model:value="misValue" :options="productOption" :style="{ width: '120px' }" />
          <n-button type="primary" ghost>搜索</n-button>
        </n-input-group>
      </n-space> -->
      <loading-empty-wrapper class="h-480px" :loading="loading" :empty="empty">
        <n-data-table :columns="columns" :data="dataSource" :flex-height="true" class="h-480px" />
      </loading-empty-wrapper>
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { onMounted, ref } from 'vue';
import { NSpace, NButton, NPopconfirm } from 'naive-ui';
import type { DataTableColumn } from 'naive-ui';
import { useLoadingEmpty } from '@/hooks';

interface DataSource {
  name: string;
  orderNum: number;
  type: string;
  money: number;
  orderType: string;
  misType: string;
  deadline: string;
  note: string;
}
const inputValue = ref(null);
const productValue = ref('全部');
const misValue = ref(null);

const range = ref(null);

const misOption = [
  {
    label: '全部',
    value: 0
  },
  {
    label: '售后',
    value: 1
  },
  {
    label: '投诉',
    value: 2
  },
  {
    label: '损耗',
    value: 3
  },
  {
    label: '流标处罚',
    value: 4
  },
  {
    label: '嵌入ICC或RGB模式',
    value: 5
  }
];

const productOption = [
  {
    label: '全部',
    value: 0
  },
  {
    label: '名片',
    value: 1
  },
  {
    label: 'PVC名片',
    value: 2
  },
  {
    label: '折扣券',
    value: 3
  },
  {
    label: '售后卡',
    value: 4
  },
  {
    label: '不干胶',
    value: 5
  },
  {
    label: '会员卡',
    value: 6
  },
  {
    label: '纸杯',
    value: 7
  },
  {
    label: '联单',
    value: 8
  },
  {
    label: '展架易拉宝',
    value: 9
  },
  {
    label: '海报',
    value: 10
  },
  {
    label: '台历',
    value: 11
  },
  {
    label: '宣传单',
    value: 12
  },
  {
    label: '菜单',
    value: 13
  },
  {
    label: '二折页',
    value: 14
  }
];

const slectValue = ref('全部');

const options = [
  {
    label: '全部',
    value: '0'
  },
  {
    label: '要资料',
    value: '1'
  },
  {
    label: '出稿中',
    value: '2'
  },
  {
    label: '已出稿',
    value: '3'
  },
  {
    label: '客户失联',
    value: '4'
  },
  {
    label: '修改定稿中',
    value: '5'
  },
  {
    label: '打样中',
    value: '6'
  },
  {
    label: '其他',
    value: '7'
  }
];

const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();

const columns: DataTableColumn<DataSource>[] = [
  {
    title: '店铺/产品',
    key: 'name',
    align: 'center'
  },
  {
    title: '订单号',
    key: 'orderNum',
    align: 'center'
  },
  {
    title: '类型形式',
    key: 'type',
    align: 'center'
  },
  {
    title: '设计费/元',
    key: 'money',
    align: 'center',
    sorter: (row1, row2) => row1.money - row2.money
  },
  {
    title: '订单状态',
    key: 'orderType',
    align: 'center'
  },
  {
    title: '不良类型',
    key: 'misType',
    align: 'center'
  },
  {
    title: '发布/截稿时间',
    key: 'deadline',
    align: 'center'
  },
  {
    title: '备注',
    key: 'note',
    align: 'center'
  },
  {
    key: 'action',
    title: '操作',
    align: 'center',
    render: row => {
      return (
        <NSpace justify={'center'}>
          <NButton
            size={'small'}
            onClick={() => {
              handleEdit(row.name);
            }}
          >
            编辑
          </NButton>
          <NPopconfirm
            onPositiveClick={() => {
              handleDelete(row.name);
            }}
          >
            {{
              default: () => '确认删除',
              trigger: () => <NButton size={'small'}>删除</NButton>
            }}
          </NPopconfirm>
        </NSpace>
      );
    }
  }
];

const dataSource = ref<DataSource[]>([]);

const createDataSource = (): DataSource[] => [
  {
    name: '益好旗舰店',
    orderNum: '1',
    type: '名片',
    money: '25',
    orderType: '待接单',
    misType: '售后',
    deadline: '2023.12.1',
    note: '加急处理'
  },
  {
    name: '时间轴旗舰店',
    orderNum: '2',
    type: 'PVC名片',
    money: '32',
    orderType: '未反馈',
    misType: '投诉',
    deadline: '2023.12.5',
    note: '延后'
  },
  {
    name: '妙语橙C店',
    orderNum: '3',
    type: '折扣券',
    money: '21',
    orderType: '交稿审核',
    misType: '损耗',
    deadline: '2023.10.1',
    note: '客户需求更改'
  },
  {
    name: '妙语橙旗舰店',
    orderNum: '4',
    type: '售后卡',
    money: '12',
    orderType: '审核通过',
    misType: '嵌入ICC或RGB模式',
    deadline: '2023.12.12',
    note: '主题颜色为蓝'
  },
  {
    name: '益好妙语橙专卖店',
    orderNum: '5',
    type: '不干胶',
    money: '22',
    orderType: '订单完结',
    misType: '售后',
    deadline: '2023.9.1',
    note: '无'
  },
  {
    name: '盈喜客旗舰店',
    orderNum: '6',
    type: '会员卡',
    money: '15',
    orderType: '不良订单',
    misType: '投诉',
    deadline: '2023.6.1',
    note: '加急处理'
  },
  {
    name: '集川旗舰店',
    orderNum: '7',
    type: '纸杯',
    money: '20',
    orderType: '流标',
    misType: '流标处罚',
    deadline: '2023.7.1',
    note: '加急'
  },
  {
    name: '益好旗舰店',
    orderNum: '8',
    type: '联单',
    money: '11',
    orderType: '审核不通过',
    misType: '损耗',
    deadline: '2023.7.17',
    note: '修改主题颜色'
  },
  {
    name: '时间轴旗舰店',
    orderNum: '9',
    type: '展架易拉宝',
    money: '26',
    orderType: '订单超时',
    misType: '嵌入ICC或RGB模式',
    deadline: '2023.12.1',
    note: '修改样式'
  },
  {
    name: '妙语橙C店',
    orderNum: '10',
    type: '海报',
    money: '24',
    orderType: '要资料',
    misType: '折扣券',
    deadline: '2023.10.1',
    note: '体现主题'
  },
  {
    name: '妙语橙旗舰店',
    orderNum: '11',
    type: '台历',
    money: '29',
    orderType: '出稿中',
    misType: '投诉',
    deadline: '2023.12.11',
    note: '字体清晰'
  },
  {
    name: '益好妙语橙专卖店',
    orderNum: '12',
    type: '宣传单',
    money: '14',
    orderType: '已出稿',
    misType: '损耗',
    deadline: '2023.1.1',
    note: '突出主题'
  },
  {
    name: '盈喜客旗舰店',
    orderNum: '13',
    type: '菜单',
    money: '19',
    orderType: '客户失联',
    misType: '嵌入ICC或RGB模式',
    deadline: '2023.6.1',
    note: '字体鲜明'
  },
  {
    name: '集川旗舰店',
    orderNum: '14',
    type: '二折页',
    money: '15',
    orderType: '修改定稿中',
    misType: '售后',
    deadline: '2021.12.1',
    note: '无'
  },
  {
    name: '益好旗舰店',
    orderNum: '15',
    type: '联单',
    money: '11',
    orderType: '打样中',
    misType: '投诉',
    deadline: '2022.12.1',
    note: '加急处理'
  },
  {
    name: '时间轴旗舰店',
    orderNum: '16',
    type: '二折页',
    money: '11',
    orderType: '其他',
    misType: '损害',
    deadline: '2020.12.1',
    note: '无'
  },
  {
    name: '盈喜客旗舰店',
    orderNum: '17',
    type: '名片',
    money: '25',
    orderType: '待接单',
    misType: '售后',
    deadline: '2023.12.1',
    note: '加急处理'
  },
  {
    name: '世纪开元旗舰店',
    orderNum: '18',
    type: 'PVC名片',
    money: '32',
    orderType: '未反馈',
    misType: '投诉',
    deadline: '2023.12.5',
    note: '延后'
  },
  {
    name: '盒小盒创意工厂',
    orderNum: '19',
    type: '折扣券',
    money: '21',
    orderType: '交稿审核',
    misType: '损耗',
    deadline: '2023.10.1',
    note: '客户需求更改'
  },
  {
    name: '世纪开元旗舰店',
    orderNum: '20',
    type: '售后卡',
    money: '12',
    orderType: '审核通过',
    misType: '嵌入ICC或RGB模式',
    deadline: '2023.12.12',
    note: '主题颜色为蓝'
  },
  {
    name: '盒小盒创意工厂',
    orderNum: '21',
    type: '不干胶',
    money: '22',
    orderType: '订单完结',
    misType: '售后',
    deadline: '2023.9.1',
    note: '无'
  },
  {
    name: '益好旗舰店',
    orderNum: '22',
    type: '会员卡',
    money: '15',
    orderType: '不良订单',
    misType: '投诉',
    deadline: '2023.6.1',
    note: '加急处理'
  },
  {
    name: '时间轴旗舰店',
    orderNum: '23',
    type: '纸杯',
    money: '20',
    orderType: '流标',
    misType: '流标处罚',
    deadline: '2023.7.1',
    note: '加急'
  },
  {
    name: '妙语橙C店',
    orderNum: '24',
    type: '联单',
    money: '11',
    orderType: '审核不通过',
    misType: '损耗',
    deadline: '2023.7.17',
    note: '修改主题颜色'
  },
  {
    name: '妙语橙旗舰店',
    orderNum: '25',
    type: '展架易拉宝',
    money: '26',
    orderType: '订单超时',
    misType: '嵌入ICC或RGB模式',
    deadline: '2023.12.1',
    note: '修改样式'
  },
  {
    name: '益好妙语橙专卖店',
    orderNum: '26',
    type: '海报',
    money: '24',
    orderType: '要资料',
    misType: '折扣券',
    deadline: '2023.10.1',
    note: '体现主题'
  },
  {
    name: '盈喜客旗舰店',
    orderNum: '27',
    type: '台历',
    money: '29',
    orderType: '出稿中',
    misType: '投诉',
    deadline: '2023.12.11',
    note: '字体清晰'
  },
  {
    name: '集川旗舰店',
    orderNum: '28',
    type: '宣传单',
    money: '14',
    orderType: '已出稿',
    misType: '损耗',
    deadline: '2023.1.1',
    note: '突出主题'
  },
  {
    name: '世纪开元旗舰店',
    orderNum: '29',
    type: '菜单',
    money: '19',
    orderType: '客户失联',
    misType: '嵌入ICC或RGB模式',
    deadline: '2023.6.1',
    note: '字体鲜明'
  },
  {
    name: '世纪开元旗舰店',
    orderNum: '30',
    type: '二折页',
    money: '15',
    orderType: '修改定稿中',
    misType: '售后',
    deadline: '2021.12.1',
    note: '无'
  },
  {
    name: '盒小盒创意工厂',
    orderNum: '31',
    type: '联单',
    money: '11',
    orderType: '打样中',
    misType: '投诉',
    deadline: '2022.12.1',
    note: '加急处理'
  },
  {
    name: '盒小盒创意工厂',
    orderNum: '32',
    type: '二折页',
    money: '11',
    orderType: '其他',
    misType: '损害',
    deadline: '2020.12.1',
    note: '无'
  }
];

// 过滤函数
const filterData = (data: DataSource[], name?: string) => {
  if (!name) {
    return data; // 如果name为空，则返回原始数据
  }
  return data.filter((item: DataSource) => item.orderType === name); // 否则，根据name过滤数据
};

function getDataSource(name?: string) {
  startLoading();

  setTimeout(() => {
    dataSource.value = filterData(createDataSource(), name);
    endLoading();
    setEmpty(!dataSource.value.length);
  }, 1000);
}

function getEmptyDataSource() {
  startLoading();
  setTimeout(() => {
    dataSource.value = [];
    endLoading();
    setEmpty(!dataSource.value.length);
  }, 1000);
}

function handleEdit(_name: string) {
  //
}

function handleDelete(_name: string) {
  //
}

onMounted(() => {
  getDataSource();
});
</script>

<style scoped></style>
